<template>
	<!-- 密码登录 -->
	<view class="content">
		<view class="empty"></view>
		<view class="title">
			<span>登录/注册</span><br>
			<span>辅助标语</span>
		</view>
		<!-- 输入框 -->
		<view class="input">
			<view class="dd">
				<span>+86</span>
				<input class="inputID" type="number" v-model="number" placeholder="请输入手机号" maxlength="11">
			</view>
			<view class="dd">
				<view class="" v-show="!passwordShow">
					<input class="inputID" v-model="psw" type="password" password="true"
					 maxlength="20" placeholder="请输入密码">
					<image src="/static/img/login/passwordNotShow.png" alt=""  
					@click="passwordShow=true" mode="scaleToFill"></image>
				</view>
				<view class="" v-show="passwordShow">
					<input class="inputID" v-model="psw" type="text"
					 maxlength="20" placeholder="请输入密码">
					<image src="/static/img/login/passwordShow.png" alt=""
					@click="passwordShow=false" mode="scaleToFill"></image>
				</view>
				
			</view>
		</view>
		<view class="verifyLogin">
			<span @click="toLogin2">验证码登录</span><br>
		</view>
		
		<view class="login">
			<button ref="button" class="button" 
			:style="isQualified?'color:#FFFFFF;background-color:#08C8BD;':''" 
			@click="submit">立即登录</button>
		</view>
		<view class="agree">
			<view class="img" v-show="!agree">
				<image src="/static/img/login/Group111@2x.png" alt="" @click="agree=true" v-show="!agree" mode="scaleToFill"></image>
			</view>
			<view class="img" v-show="agree">
				<image src="/static/img/login/Group111@2x2.png" alt="" @click="agree=false" v-show="agree" mode="scaleToFill"></image>
			</view>
			
			<span>登录即同意</span><span>《一键登录协议》</span><span>与</span><span>《用户使用协议》</span><br>
			<span>以及</span><span>《隐私声明》</span>
		</view>
	</view>
</template>

<script>
	import JSEncrypt from './jsencrypt.js'
	
	export default {
		data() {
			return {
				number:'',			//帐号名
				psw:'',				//密码
				passwordShow:false,	//是否隐藏密码
				isQualified:false,	//帐号密码格式是否合法
				agree:false			//是否同意用户登录协议
			};
		},onLoad(){
			
		},
		watch:{
			number(){
				if(this.number.length===11&&this.psw.length>=6){
					this.isQualified=true
				}else{
					this.isQualified=false
				}
			},
			psw(){
				if(this.number.length===11&&this.psw.length>=6){
					this.isQualified=true
				}else{
					this.isQualified=false
				}
				
			}
		},
		methods:{
			submit(){
				if(true){
					this.$store.dispatch('initDic').then(()=>{
						//利用JSEncrypt加密密码(rsa算法)
						let encryptor=new JSEncrypt()
						//公钥
						let pubKey="MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAh4C5CzmAtVQIcDaI/UD8uOlkvvX8g+IuQCA1ax+h9fIa9bG148Tq1sXCOujkH9ER+1Oa6hFd2LM0fUeCjUQ3CSR61IGkpA226M2OnqXl8Koa1e6lZkBaSKOLu7sem9aKhnMJpaD389fQ349FLELH42keBpD0wp30RT6QSxjmqkLLbGzgbrCLIs/MCRAxvFiGTUoGk3pHPM6CWDLyvlDwBTFHMSYpLNP3OLBH9sfroX4m0eyAiSSzkneqyozEl8YQyG0T404YfHGUQSaqkwY6lkOFuS83KgM/flFwqkSPDUhoVrtpaqib9GcQsE2rzPA7kK4eFwn1upxzoynNtbHTYQIDAQAB"
						encryptor.setPublicKey(pubKey)//设置公钥
						var rsaPassWord = encryptor.encrypt(this.psw)  // 对内容进行加密
						uni.getSystemInfo({
							success:res=>{
								console.log(res);
								
								let requestData={
										brand:res.brand,
										did:uni.getStorageSync('did'),
										loginId:this.number,
										passport:rsaPassWord,
										loginType:'userPwdLogin',
										osVersion:res.system+' '+res.version,
										userId:uni.getStorageSync('userId'),
										launchMode:'cold',
									}
								console.log('requestData',requestData);
								this.$http.request({
									url:'/user/login',
									data:requestData
								}).then((result)=>{
									let res=result.data
									console.log(res);
									if(res.code==200){
										uni.setStorageSync('userId', res.data.userId)
										uni.setStorageSync('token',res.data.loginToken)
										uni.setStorageSync('loginInfo',res.data)
										uni.navigateBack({
											delta:1
										})
									}
									
								})
							}
						})
					})
					
					
					// uni.chooseLocation({
					// 	success: function (res) {
					// 		console.log('位置名称：' + res.name);
					// 		console.log('详细地址：' + res.address);
					// 		console.log('纬度：' + res.latitude);
					// 		console.log('经度：' + res.longitude);
					// 	}
					// });
					// uni.getUserProfile({
					// 	desc: '获取你的昵称、头像、地区及性别',
					// 	success: res => {
					// 		console.log('getUserProfile',res);
							
					// 	},
					// 	fail: res => {
					// 		console.log('获取用户信息失败');
					// 		that.num=0
					// 		uni.removeStorageSync('token')
					// 	}
					// });
				}
			},
			toLogin2(){
				console.log('toLogin2');
				uni.redirectTo({
					url:'./login2'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background-color: #FFFFFF;
		.empty{
			height: 1px;
		}
		.title{
			margin-left: 32rpx;
			margin-top: 172rpx;
			span:nth-of-type(1){
				font-size: 24px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #001A18;
			}
			span:nth-of-type(2){
				font-size: 12px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #08C8BD;
			}
		}
		
		.input{
			margin: 32rpx;
			margin-bottom: 0;
			.dd{
				display: flex;
				padding: 32rpx 0;
				border-bottom: 1px solid #F5F5F5;
				
				span{
					padding-right: 32rpx;
					border-right: 1px solid #F5F5F5;
				}
				.inputID{
					position: relative;
					margin-left: 32rpx;
					width: 500rpx;
				}
				image{
					position: absolute;
					right:64rpx;
					transform: translate(0,-40rpx);
					//#ifdef MP-ALIPAY
					transform: translate(0,16rpx);
					//#endif
					width: 44rpx;
					height: 44rpx;
				}
			}
			
		}
		.verifyLogin{
			>span{
				display: block;
				margin: 32rpx;
				float: right;
				font-size: 14px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #505E5C;
			}
		}
		
			
		.button{
			margin: 32rpx;
			width: 686rpx;
			background: #F3F7F8;
		}
		
		.agree{
			margin-left: 100rpx;
			text-align: center;
			position: absolute;
			bottom:50rpx;
			.img{
				display: inline-block;
				image{
					width: 28rpx;
					height: 28rpx;
					margin-right: 10rpx;
					vertical-align: -4rpx;
				}
			}
			
			span:nth-of-type(odd){
				font-size: 24rpx;
				color: #99A3A3;
			}
			span:nth-of-type(even){				
				font-size: 24rpx;
				color: #08C8BD;
			}
		}
	}
</style>
